<template>
  <div class="active">
    <div
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <h3>已报名供应商资料</h3>
      <el-button type="primary" @click="getInfo(true)">刷新</el-button>
    </div>
    <el-table :data="filetable" stripe style="width: 100%">
      <!-- 使用 v-for 循环生成表格列 -->
      <el-table-column
        v-for="(column, index) in fileColumns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        align="center"
      ></el-table-column>

      <el-table-column prop="status" label="状态" width="80" align="center">
        <template #default="scope">
          <span :style="{color: scope.row.downloadPassword? '': scope.row.remark == undefined? '': 'red'}"
              >{{
            scope.row.downloadPassword
              ? "已解密"
              : scope.row.remark == undefined
              ? "/"
              : "异常"
          }}</span>
        </template>
      </el-table-column>
      <!-- 手动添加操作列 -->
      <el-table-column label="操作" width="80" fixed="right" align="center">
        <template #default="scope">
          <el-button type="text" @click="handleView(scope.$index, scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="endbutton">
      <el-button
      type="primary"
      @click="nextStep"
      style="width: 200px; margin: 20px 0px"
      >下一步</el-button
    > 
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { judgeProjectInfo } from "@/api/project.js";
import { getDictList, getDict, nowTime, getdict } from "@/utils/common.js";
import { execTask } from "@/api/examine.js";
import { ElMessage } from "element-plus";

const route = useRoute();
const router = useRouter();

const id = computed(() => route.query.id);
const usertype = computed(
  () => JSON.parse(localStorage.getItem("judgeInfo")).type
);
const projectInfo = ref({
  oaCode: "项目编号",
  name: "项目名称",
  noticeUrl: "项目公示",
  status: "征集中",
  publishTime: "2024-11-01",
  applyStartTime: "2024-11-10",
  applyEndTime: "2024-11-10",
  auditTime: "2024-11-11",
});

// 定义表格列配置
const fileColumns = ref([
  { prop: "key", label: "序号", width: "60" },
  { prop: "applyTime", label: "报名时间", width: "140" },
  { prop: "supplierCode", label: "供应商编码", width: "100" },
  { prop: "name", label: "报名供应商", width: "240" },
  { prop: "supplierName", label: "报名人姓名", width: "100" },
  { prop: "supplierPhone", label: "手机", width: "120" },
  { prop: "supplierEmail", label: "邮箱", width: "160" },
]);
const getInfo = (boolean) => {
  judgeProjectInfo({ id: id.value }).then((res) => {
    if (res.code == "200") {
      projectInfo.value = res.data;
      if (projectInfo.value.taskNode) {
        filetable.value = res.data.supplierList;
        for (let i = 0; i < filetable.value.length; i++) {
          filetable.value[i].key = i + 1;
        }
      }
      if (boolean) {
        ElMessage({
          message: "刷新成功",
          type: "success",
        });
      }
    }
  });
};

const handleView = (item, data) => {
  console.log(item, data);
  const url = `/judgedetail?id=${id.value}&type=judgeInfo&judgeid=${data.id}`;
  window.open(url, "_blank"); // 在新窗口中打开
};
const nextStep = () => {
  const params = { projectId: id.value };
  execTask(params).then((res) => {
    if (res.code) {
      window.location.replace("");
    }
  });
};
// 定义表格数据
const filetable = ref([]);
onMounted(() => {
  getInfo();
});
</script>

<style scoped lang="scss">
@use "./judge";
</style>

